<template>
    <div class='secNav'>
        <el-row class="tac">
            
                <el-menu
                :default-active="this.defaultActive"
                class="el-menu-vertical-demo sec"
                @open="handleOpen"
                @close="handleClose"
                :router='true'>
                

                <!-- <el-menu-item 
                v-for="(item) of nav" 
                :key='item.id' 
                :index='item.path'
                @click='changeActive(item.path)'>
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.title}}</span>
                </el-menu-item> -->


                    <el-menu-item-group
                        v-for='item2 of this.AllList[1].class'
                        :key='item2.title'>
                        <template slot="title">{{item2.title}}</template>
                        <el-menu-item
                        v-for='item3 of item2.detail'
                        :key='item3.title' 
                        :index="item3.path"
                        @click="changeActive(item3.path)">
                        
                        <i class="el-icon-menu"></i>
                        <span slot="title">{{item3.title}}</span>
                        </el-menu-item>
                    
                    </el-menu-item-group>
                
                </el-menu>
            
        </el-row>
    </div>
</template>



<script>
import { mapState,mapMutations } from 'vuex'
export default {
    name:'SecLeft',
    props:{
        nav:Array
    },
    computed:{
        ...mapState(['defaultActive','AllList'])
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      changeActive(path){
        //   this.$store.dispatch('changeActive',path)
          this.changeActive(path)
          
      },
      ...mapMutations(['changeActive'])
    }
  }

</script>



<style lang="stylus">
.secNav
    float left
    height 93vh
    overflow hidden
    max-width 15%
    .tac
        height 100%
        .sec
            height 100%
</style>
